<template>
  <div>
    <div class="container">
      <div class="demo-input-suffix searchBox">
        <div class="searchGroup">
          <span class="inputName">用户名称：</span>
          <el-input placeholder="用户名称"
                    v-model="query.admin_name"
                    style="width:auto;margin-right:10px;"></el-input>
          <span class="inputName">操作时间：</span>
          <el-date-picker v-model="query.time"
                          type="daterange"
                          align="right"
                          unlink-panels
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          format="yyyy 年 MM 月 dd 日"
                          value-format="yyyy-MM-dd">></el-date-picker>
            <span class="inputName">操作模块：</span>
            <el-cascader
            v-model="rule"
            :options="ruleList"
            :props="{ checkStrictly: true, value:'rule',children: 'children',label: 'auth_name'}"
            clearable></el-cascader>
          <el-button type="success"
                     icon="el-icon-search"
                     size="medium"
                     @click="search"
                     style="margin-left:10px;">搜索</el-button>
          <el-button type="warning"
                     icon="el-icon-refresh-left"
                     size="medium"
                     @click="reset">重置</el-button>
        </div>
      </div>
      <el-table ref="multipleTable"
                :data="tableData"
                border
                style="width: 100%;"
                stripe>
        <el-table-column label="序号"
                         align="center"
                         width="100"
                         fixed>
          <template slot-scope="scope">
            <span>{{scope.$index+(currentPage - 1) * pagesize + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="admin_name"
                         label="用户"
                         align="center"
                         width="150"></el-table-column> 
        <el-table-column prop="content"
                         label="操作模块"
                         align="center"></el-table-column>
        <el-table-column prop="create_time"
                         label="操作时间"
                         align="center"
                         width="250"></el-table-column>
        <el-table-column prop="ip"
                         label="IP地址"
                         align="center"
                         width="150"></el-table-column>
        <!-- <el-table-column label="操作" align="center" width="160">
                <template slot-scope="scope">
                    <el-button @click="createBus(3,scope.row)" type="text" size="small">查看</el-button>
                    <el-button @click="createBus(2,scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click="handleDelete(scope.row.id)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>-->
      </el-table>
      <div class="pagination">
        <!-- <span class="demonstration">完整功能</span> -->
      <el-pagination
          layout="sizes,total, prev, pager, next, jumper"
          :current-page="currentPage"
          :page-size="pagesize"
          :page-sizes="[10, 50, 100, 150, 200]"
          @size-change="handleSizeChange"
          :total="total"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import api from '@/api/apis';
export default {
  data () {
    return {
      tableData: [], //假人员信息数据
      currentPage: 1, //初始页
      pagesize: 10, //    每页的数据
      total: null,
      admin_name:'',
      rule:[],
      ruleList:[],
      query: {
        admin_name: '',
        time: '',
        rule:''
      }
    };
  },
  mounted () {
    this.ajax(this.query);
    this.typeInit()
  },
  methods: {
    //日志列表接口
    ajax () {
      if(this.rule.length>0){
        this.query.rule=this.rule[this.rule.length-1];
      }else{
        this.query.rule=''
      }
      const loading = this.$loading({ text: '加载中...' });
      this.$http.post(api.JOURNAL, {
        page:this.currentPage,
        pageSize:this.pagesize,
        admin_name:this.query.admin_name,
        rule:this.query.rule,
        start:Array.isArray(this.query.time) && this.query.time.length>0?this.query.time[0]:'',
        end:Array.isArray(this.query.time) && this.query.time.length>1?this.query.time[1]:'',
      }).then(res => {
        console.log(res);
        loading.close();
        this.tableData = res.data.data;
        this.total = res.data.total;
      });
    },
    typeInit () {
      this.$http.post(api.JOURNAL_ROLE).then(res => {
        this.ruleList = Array.isArray(res.data)?res.data:[];
      });
    },
    //点击第几页
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      this.ajax()
    },
    handleSizeChange(val){
      this.pagesize = val;
      this.ajax()
    },
    //重置输入框
    reset () {
      this.currentPage = 1;
       this.query={
        admin_name: '',
        time: '',
        rule:[]
      };
      this.rule=[];
      this.ajax()
    },
    search () {
      this.currentPage = 1;
      this.ajax()
    }
  }
};
</script>
<style scoped>
.container{
  padding:20px;
}
.list {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin: 20px;
}
.searchBox {
    background: #fff;
    /* border-bottom: 1px solid #e4e4e4; */
    width: 100%;
}
.searchGroup {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 20px;
}
.inputName {
    padding: 8px;
}
</style>

<style>
.demo-drawer__content {
    margin: 0 auto;
    width: 80%;
    border: 1px solid #fafafa;
}
.el-drawer__body {
    height: 100%;
    overflow-y: auto;
}
</style>